<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'

const router = useRouter()

// 模拟训练进度数据
const trainingProgress = ref(0)
const trainingInfo = ref({
  algorithm: 'XXXXXXXXXXXXXXX',
  dataset: 'XXXXXXXXXXXXXXX',
  weights: 'XXXXXXXXXXXXXXX'
})

// 模拟损失函数数据
const totalLossData = ref([])
const subLossData = ref([
  { name: '分损失1', data: [] },
  { name: '分损失2', data: [] },
  { name: '分损失3', data: [] }
])

// 初始化图表
const initCharts = () => {
  // 总损失图表
  const totalLossChart = echarts.init(document.getElementById('totalLossChart'))
  const totalLossOption = {
    title: { text: '总损失' },
    xAxis: { type: 'value', name: '迭代次数' },
    yAxis: { type: 'value', name: '损失值' },
    series: [{
      data: totalLossData.value,
      type: 'line',
      lineStyle: { color: '#ff0000' }
    }]
  }
  totalLossChart.setOption(totalLossOption)

  // 分损失图表
  subLossData.value.forEach((loss, index) => {
    const chart = echarts.init(document.getElementById(`subLossChart${index}`))
    const option = {
      title: { text: loss.name },
      xAxis: { type: 'value', name: '迭代次数' },
      yAxis: { type: 'value', name: '损失值' },
      series: [{
        data: loss.data,
        type: 'line',
        lineStyle: { color: '#ff1493' }
      }]
    }
    chart.setOption(option)
  })
}

// 模拟更新数据
const updateData = () => {
  if (trainingProgress.value < 100) {
    trainingProgress.value += 1
    
    // 更新损失数据
    totalLossData.value.push([totalLossData.value.length, Math.random() * 0.5 + 1])
    subLossData.value.forEach(loss => {
      loss.data.push([loss.data.length, Math.random() * 0.5 + 1])
    })
    
    // 更新图表
    initCharts()
  }
}

// 确认完成
const handleConfirm = () => {
  if (confirm('确认完成以后，进入任务列表可查看详细信息')) {
    router.push('/model-training')
  }
}

onMounted(() => {
  initCharts()
  // 模拟数据更新
  setInterval(updateData, 1000)
})
</script>

<template>
    
  <div class="training-container">
    <div class="sidebar">
      <div class="logo">
        <img src="/pic/dataManagement/logo-菜单左上方位置.png" alt="Logo">
      </div>
      <div class="nav-buttons">
        <div class="nav-button"
             @mouseenter="handleMouseEnter('modelTraining')"
             @mouseleave="handleMouseLeave('modelTraining')"
             @mousedown="handleMouseDown('modelTraining')"
             @mouseup="handleMouseUp('modelTraining')">
             <img :src="buttonStates.modelTraining === 'normal' ? '/pic/trainingManagement/模型训练-正常.png' : '/pic/trainingManagement/模型训练-悬浮.png'" alt="模型训练">
             <!-- <span>模型训练</span> -->
        </div>
        <div class="nav-button"
             @mouseenter="handleMouseEnter('inferenceDemo')"
             @mouseleave="handleMouseLeave('inferenceDemo')"
             @mousedown="handleMouseDown('inferenceDemo')"
             @mouseup="handleMouseUp('inferenceDemo')">
             <img :src="buttonStates.inferenceDemo === 'normal' ? '/pic/trainingManagement/推理演示-正常.png' : '/pic/trainingManagement/推理演示-悬浮.png'" alt="推理演示">
             <!-- <span>推理演示</span> -->
        </div>
      </div>
    </div>
    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 训练进度 -->
        
        <div class="progress-section">
            <div class="progress-bar">
                <div class="progress" :style="{ width: trainingProgress + '%' }">
                {{ trainingProgress }}%
                </div>
            </div>
        </div>

        <!-- 基本信息 -->
        <div class="info-section">
            <div class="info-item">
                <span class="label">算法：</span>
                <span class="value">{{ trainingInfo.algorithm }}</span>
            </div>
        <div class="info-item">
            <span class="label">数据集：</span>
            <span class="value">{{ trainingInfo.dataset }}</span>
        </div>
            <div class="info-item">
                <span class="label">权重集：</span>
                <span class="value">{{ trainingInfo.weights }}</span>
            </div>
        </div>

        <!-- 损失函数图表 -->
        <div class="charts-section">
            <div id="totalLossChart" class="chart"></div>
            <div v-for="(loss, index) in subLossData" :key="index"
                :id="`subLossChart${index}`" class="chart">
            </div>
        </div>

        <!-- 确认完成按钮 -->
        <div class="confirm-button" @click="handleConfirm">
            确认完成
        </div>
    </div>
  </div>
</template>

<style scoped>
.sidebar {
  width: 80px;
  background-color: #4a6baf;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.logo img {
  width: 60px;
  height: auto;
}

.nav-buttons {
  margin-top: 20px;
}

.nav-button {
  margin-bottom: 10px;
  cursor: pointer;
}

.nav-button img {
  width: 60px;
  height: auto;
}

.training-container {
  padding: 20px;
  height: 100vh;
  overflow-y: auto;
}

.progress-section {
  margin-bottom: 20px;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  line-height: 20px;
  transition: width 0.3s ease;
}

.info-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 5px;
}

.info-item {
  margin-bottom: 10px;
}

.label {
  font-weight: bold;
  margin-right: 10px;
}

.charts-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.chart {
  height: 300px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.confirm-button {
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #1890ff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 auto;
}

.confirm-button:hover {
  background-color: #40a9ff;
}
</style>